import './WijmoPivotChart.scss'
import { PivotChart } from '@grapecity/wijmo.react.olap'
import { PivotChartType, LegendVisibility } from '@grapecity/wijmo.olap';
import { useReactive } from 'ahooks';
import { Radio, Button } from 'antd'
import { useState } from 'react';


const ChartsTypeList = [
    { value: 'Column', label: '柱状图' },
    { value: 'Bar', label: '条形图' },
    { value: 'Line', label: '折线图' },
    { value: 'Area', label: '面积图' },
    { value: 'Pie', label: '饼图' },
]

const ChartsLegendState = [
    { value: 'Auto', label: '自动' },
    { value: 'Always', label: '显示' },
    { value: 'Never', label: '隐藏' },
]

const ChartsTitleState = [
    { value: true, label: '显示' },
    { value: false, label: '隐藏' },
]

const WijmoPivotChart = ({ data }) => {
    const InitChart = useReactive({ init: null })

    const [ChartsType, setChartsType] = useState('Column')
    const [ChartLegend, setChartLegend] = useState('Auto')
    const [ChartTitle, setChartTitle] = useState(true)

    const switchChart = (e) => {
        setChartsType(e.target.value)
        InitChart.init.chartType = PivotChartType[e.target.value]
    }

    const switchLegend = (e) => {
        setChartLegend(e.target.value)
        InitChart.init.showLegend = LegendVisibility[e.target.value]
    }

    const switchTitle = (e) => {
        setChartTitle(e.target.value)
        InitChart.init.showTitle = e.target.value
    }

    const onSave = (e) => {
        InitChart.init.saveImageToFile(`Charts.${e}`)
    }


    const init = (init) => InitChart.init = init


    return (
        <div className='WijmoPivotChart'>
            <PivotChart
                showTitle={true}
                showLegend="Auto"
                initialized={init}
                itemsSource={data.itemsSource}
            />
            <div className='Options'>
                <div>
                    <div>图标类型</div>
                    <Radio.Group value={ChartsType} size="large" buttonStyle="solid" onChange={switchChart}>
                        {ChartsTypeList.map(({ value, label }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                    </Radio.Group>
                </div>
                <div>
                    <div>图例状态</div>
                    <Radio.Group value={ChartLegend} size="large" buttonStyle="solid" onChange={switchLegend}>
                        {ChartsLegendState.map(({ value, label }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                    </Radio.Group>
                </div>
                <div>
                    <div>图例标题</div>
                    <Radio.Group value={ChartTitle} size="large" buttonStyle="solid" onChange={switchTitle}>
                        {ChartsTitleState.map(({ value, label }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                    </Radio.Group>
                </div>
                <div>
                    <div>下载类型</div>
                    <div>
                        <Button size="large" onClick={() => onSave('PNG')}>PNG</Button>
                        <Button size="large" onClick={() => onSave('JPEG')}>JPEG</Button>
                        <Button size="large" onClick={() => onSave('SVG')}>SVG</Button>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default WijmoPivotChart;